<template>
	<view class="content">
		<view class="con_nav">
			<u-navbar :border="false">
				<view class="nav_con" @click="cshow">
					<view>{{plantTitle}}</view>
					<view class="nav_icon">
						<u-icon name="arrow-right" color="#ffffff" size="24"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="devices">
			<view class="dev_snum">
				温度23℃ | 湿度 70%	
			</view>
			<view class="dev_referral">
				<view class="ref_item" @click="navTo('/pages/maintenance/repair/index')">
					<view class="">
						<image class="maxiconSize" src="@/static/device/wxjinyong.png" mode=""></image>
					</view>
					<view class="item_tle">
						维保日历
					</view>
				</view>
				<view class="ref_item" @click="navTo('/pages/maintenance/polling/index')">
					<view class="">
						<image class="maxiconSize" src="@/static/device/wxxianzhi.png" mode=""></image>
					</view>
					<view class="item_tle">
						巡检计划
					</view>
				</view>
				<view class="ref_item" @click="navTo('/pages/maintenance/upkeep/index')">
					<view class="">
						<image class="maxiconSize" src="@/static/device/wxbaofei.png" mode=""></image>
					</view>
					<view class="item_tle">
						保养计划
					</view>
				</view>
				<view class="ref_item" @click="navTo('/pages/maintenance/repair/index')">
					<view class="">
						<image class="maxiconSize" src="@/static/device/wxpaimai.png" mode=""></image>
					</view>
					<view class="item_tle">
						维修管理
					</view>
				</view>
				<view class="ref_line">

				</view>
				<view class="ref_item">
					<view class="">
						<image class="maxiconSize" src="@/static/device/wxduoyingyong.png" mode=""></image>
					</view>
					<view class="item_tle">
						更多
					</view>
				</view>
			</view>
			<view class="dev_status" @click="cshow">
				<view class="dev_use">
					<image class="maxiconSize" src="@/static/device/wxzhengchangshiyong.svg" mode=""></image> 当日任务完成情况
				</view>
				<view class="">
					>
				</view>
			</view>
		</view>
		<view class="dev_func">
			<view class="task_object" v-if="false">
				<view class="task_goal">
					<view class="goal_tle">
						任务目标
					</view>
					<view class="goal_day">
						<text class="today" style="">今日</text>
						<text>上月</text>
					</view>
				</view>
				<view class="task_pro">
					<view class="pro_gre">
						<bestjhh-movable-area max='50' min='20'></bestjhh-movable-area>
					</view>
					<view class="pro_num">
						<text>0</text>
						<text>50个</text>
					</view>
				</view>
				<view class="task_con">
					<view class="con_item">
						<image src="../../static/device/gwpeizhi-yunweipeizhi.png" mode=""></image>
						<view class="">
							巡检：50
						</view>
					</view>
					<view class="con_item">
						<image src="../../static/device/gwpeizhi-yunweipeizhi.png" mode=""></image>
						<view class="">
							保养：100
						</view>
					</view>
					<view class="con_item">
						<image src="../../static/device/gwpeizhi-yunweipeizhi.png" mode=""></image>
						<view class="">
							保养：100
						</view>
					</view>
				</view>
				<view class="task_rate">
					<view class="">
						任务转化率：50%
					</view>
					<view class="rate_m" style="">
						较上月
					</view>
						<image src="../../static/device/gwpeizhi-yunweipeizhi.png" mode=""></image>
				</view>
			</view>
			<view class="func_item">
				<DevTitle oneTle="设备维修" twoTle="设备保修及其任务"></DevTitle>
				<view class="engineer">
					<view class="eng_item">
						<view class="eng_ico">
							<image src="@/static/device/wxzhengchangshiyong.svg" mode=""></image>
						</view>
						<view class="eng_num">
							<text>今日报修</text>
							<text>19999</text>
						</view>
					</view>
					<view class="eng_item">
						<view class="eng_ico">
							<image src="@/static/device/wxzhengchangshiyong.svg" mode=""></image>
						</view>
						<view class="eng_num">
							<text>待分配</text>
							<text>19999</text>
						</view>
					</view>
					<view class="eng_item">
						<view class="eng_ico">
							<image src="@/static/device/wxzhengchangshiyong.svg" mode=""></image>
						</view>
						<view class="eng_num">
							<text>待处理</text>
							<text>19999</text>
						</view>
					</view>
				</view>
				<view class="eng_tab">
					<view class="tab_item">
						<view class="item_img img1">
							<image src="../../static/device/daishenpi1.svg" mode=""></image>
						</view>
						<view class="item_tle">
							快速报修
						</view>
					</view>
					<view class="tab_item">
						<view class="item_img img2">
							<image src="../../static/device/daichuli.svg" mode=""></image>
						</view>
						<view class="item_tle">
							报修工单
						</view>
					</view>
					<view class="tab_item">
						<view class="item_img img3">
							<image src="../../static/device/yanshoushenqing.svg" mode=""></image>
						</view>
						<view class="item_tle">
							外委报修
						</view>
					</view>
				</view>
			</view>
			<view class="func_item">
				<DevTitle oneTle="设备点巡检" twoTle="设备点检巡检管理"></DevTitle>
				<view class="eq_main">
					<view class="eq_item eq_item1">
						<view>待巡检</view>
						<view style="color: #FF6600;">5</view>
					</view>
					<view class="eq_item eq_item2">
						<view class="eq_today"><text class="eq_num">18%</text>今日完成</view>
						<view class="eq_expire">即将过期：3</view>
					</view>
					<view class="eq_item eq_item3">
						<view><image class="maxiconSize" src="@/static/device/wxxianzhi.png" mode=""></image>巡检计划</view>
						<view @click="navTo('/pages/maintenance/patrolTask/index')">查看任务</view>
					</view>
				</view>
			</view>
			<view class="func_item">
				<DevTitle oneTle="设备保养" twoTle="设备保养管理"></DevTitle>
				<view class="eq_main">
					<view class="eq_item eq_item1">
						<view>待保养</view>
						<view style="color: #FF6600;">5</view>
					</view>
					<view class="eq_item eq_item2">
						<view class="eq_today"><text class="eq_num">18%</text>今日完成</view>
						<view class="eq_expire">即将过期：3</view>
					</view>
					<view class="eq_item eq_item3">
						<view><image class="maxiconSize" src="@/static/device/wxxianzhi.png" mode=""></image>保养计划</view>
						<view>查看任务</view>
					</view>
				</view>
			</view>
			<view class="func_item">
				<DevTitle oneTle="设备计量" twoTle="设备计量管理"></DevTitle>
				<view class="eq_main">
					<view class="eq_item eq_item1">
						<view>待计量</view>
						<view style="color: #FF6600;">5</view>
					</view>
					<view class="eq_item eq_item2">
						<view class="eq_today"><text class="eq_num">18%</text>今日完成</view>
						<view class="eq_expire">即将过期：3</view>
					</view>
					<view class="eq_item eq_item3">
						<view><image class="maxiconSize" src="@/static/device/wxxianzhi.png" mode=""></image>计量计划</view>
						<view>查看任务</view>
					</view>
				</view>
			</view>
			<view class="func_item" v-if="false">
				<DevTitle oneTle="计量" twoTle="设备计量管理2大服务"></DevTitle>
				<view class="func_list">
					<view class="list_item" @click="navTo('/pages/device/list')">
						<view class="">
							<image src="@/static/device/wxliebiao1.png" mode=""></image>
						</view>
						<view class="">
							计量计划
						</view>
					</view>
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxliebiao.png" mode=""></image>
						</view>
						<view class="">
							计量任务
						</view>
					</view>
				</view>
			</view>
	</view>
		<u-select value-name="value" cancel-color="#999999" confirm-color="#0581fd" label-name="label" v-model="show" :list="list"
		 @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import DevTitle from "@/components/dev-title/index.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{DevTitle},
		data() {
			return {
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				plantTitle: '格物重庆超级工厂',
				background: '#0581fd'
			};
		},
		mounted() {},
		methods: {
			cshow() {
				console.log('001')
				this.show = true
			},

			confirm(e) {
				console.log(e)
			},
			/*下拉刷新的回调 */
			downCallback() {
				let that = this
				return
				//联网加载数据
				this.apis.materialsApi.maMaterialList({
					pageNum: 1,
					pageSize: 10,
					category: this.dictValue,
					materialName: this.materialName
				}).then(res => {
					this.materList = res.rows
					this.mescroll.endBySize(res.rows.length, res.total)
				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				return
				this.apis.materialsApi.maMaterialList({
					pageNum: 1,
					pageSize: 10,
					category: this.dictValue,
					materialName: this.materialName
				}).then(res => {
					this.materList = this.materList.concat(res.rows);
					this.mescroll.endBySize(res.rows.length, res.total)

				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin minIconSize{
		width: 40rpx;
		height: 40rpx;
	}
	@mixin maxIconSize{
		width: 60rpx;
		height: 60rpx;
	}
	/deep/ .u-navbar {
		background: $bodyColor !important;
		color: #FFFFFF !important;
	}

	/deep/ .u-back-wrap {

		padding: 0 30rpx 0 0 !important;
	}
	.content {
		/deep/ .u-iconfont {
			display: none !important;
		}

		background: #fafafa;
		position: relative;
		.con_nav{
			/deep/ .u-border-bottom:after{
				border: none;
			}
		}
		.nav_con {
			width: 100%;
			display: flex;
			align-items: center;

			/deep/ .u-iconfont {
				display: block !important;
			}

			.nav_icon {
				margin-left: 10rpx;
			}
		}
		.devices {
			z-index: 9;
			width: 100%;
			position: fixed;
			background-color: $bodyColor;
			box-sizing: border-box;
			padding: 0 30rpx;

			.dev_snum {
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.dev_referral {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 60rpx 0;

				.ref_item {
					color: #FFFFFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 32rpx;

					image {
						@include minIconSize;
						font-size: blod;
					}

					.item_tle {
						font-size: 24rpx;
						margin: 6rpx 0;
					}
				}

				.ref_line {
					height: 130rpx;
					width: 2rpx;
					background: rgba($color: #ffffff, $alpha: 0.8);
				}
			}

			.dev_status {
				width: 92%;
				position: fixed;
				margin-top: -35rpx;
				@include box_shadow;
				@include box_radius(80rpx)
				color: $maincolor;
				background: #ffffff;
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.dev_use {
					font-size: 28rpx;
					display: flex;
					align-items: center;

					image {
						@include minIconSize;
						margin-right: 20rpx;
					}
				}
			}
		}
		.dev_func{
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-top: 370rpx;
			.func_item{
				display: flex;
				flex-direction: column;
				z-index: -1;
				@include box_radius(24rpx)
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx 20rpx 50rpx 20rpx;
				margin-bottom: 30rpx;
				.func_tle{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 48rpx;
					.tle_b{
							font-size: 32rpx;
							color: #333333;
							margin-left: -10rpx;
					}
					.tle_c{
						margin-left: 12rpx;
						font-size: 24rpx;
						color:#999999;
					}
					.tle_a{
						display: flex;
						align-items: center;
						image{
							@include minIconSize;
						}
					}
				}
				.func_list{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-left: 40rpx;
					.list_item{
						font-size: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 70rpx;
					}
					image{
						@include maxIconSize;
					}
				}
				.eq_main{
					display: flex;
					flex-direction: column;
					.eq_item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						image {
							@include minIconSize;
							font-size: blod;
						}
						.eq_num{
							color: #1864FC;
						}
						.eq_today{
							color:#797979;
						}
						.eq_expire{
							color: #111E36;
						}
					}
					.eq_item2{
						margin: 8rpx 0 30rpx 0;
						font-size: 24rpx;
					}
					.eq_item1{
						font-size: 32rpx;
						view:nth-child(1){
							font-weight: bold;
						}
					}
					.eq_item3{
						font-size: 28rpx;
						view:nth-child(2){
							font-weight: bold;
							padding: 35rpx 120rpx;
							border-radius: 10rpx;
							border: 2rpx solid #EAF0FE;
						}
					}
				}
				.engineer{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-radius: 20rpx;
					padding: 36rpx 30rpx;
					box-sizing: border-box;
					border: 4rpx solid #F6F6F8;
					.eng_item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.eng_ico{
							margin-right: 20rpx;
							image {
								height: 64rpx;
								width: 64rpx;
								font-size: blod;
							}
						}
						.eng_num{
							display: flex;
							flex-direction: column;
							font-size: 24rpx;
							text:nth-child(2){
								color: #ffb629;
								margin-top: 4rpx;
							}
						}
					}
				}
				.eng_tab{
					display: flex;
					margin-top: 30rpx;
					justify-content: space-between;
					padding: 42rpx;
					.tab_item{
						display: flex;
						flex-direction: column;
						align-items: center;
						.item_img {
							padding: 22rpx 28rpx;
							border-radius: 50%;
							margin-bottom: 10rpx;
						}
						
						.img1{
							background: rgba($color: #0379FF, $alpha: 0.2);
						}
						.img2{
							background: rgba($color: #FFA903, $alpha: 0.2);
						}
						.img3{
							background: rgba($color: #03FF9D, $alpha: 0.2);
						}
						.item_tle{
							font-size: 26rpx;
							color: #101010;
						}
						image {
							height: 50rpx;
							width: 50rpx;
							font-size: blod;
						}
					}
				}
			}
			.task_object{
				display: flex;
				flex-direction: column;
				padding: 10rpx 44rpx 22rpx 44rpx;
				@include box_radius(24rpx)
				box-sizing: border-box;
				background: #FFFFFF;
				margin-bottom: 30rpx;
				.task_goal{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goal_tle{
						font-size: 28rpx;
						color: #638EE3;
						font-weight: bold;
					}
					.goal_day{
						font-size: 28rpx;
						.today{
							margin-right: 10rpx;
							color: #638EE3;
							position: relative;
						}
							.today::after {
								content: '';
								position: absolute;
								border: 4rpx solid transparent;
								border-top-color: #638EE3;
								width: 46rpx;
								top: 100%;
								left: 0%;
								// transform: translateX(-50%);
							}
					}
				}
				.task_rate{
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
						font-size: 28rpx;
						color: #638EE3;
						image{
							width: 30rpx;
							height: 30rpx;
							// margin-right: 6rpx;
						}
						.rate_m{
							color: #A1A1A2;
							margin:0 6rpx 0 10rpx;
						}
				}
				.task_pro{
					margin: 40rpx 0 50rpx 0;
					.pro_gre{
						
					}
					.pro_num{
						font-size: 28rpx;
						color: #101010;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
				.task_con{
					display: flex;
					justify-content: space-between;
					margin-bottom: 40rpx;
					.con_item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						color: #101010;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}
</style>
